import React,{ lazy } from "react"
// Navigate重定向组件
import {Navigate} from "react-router-dom";
import Home from "@/pages/Home.tsx";
import Login from "@/pages/Login/index.tsx";

const Index = lazy(()=>import("@/pages/Index/index.tsx"))
const User = lazy(()=>import("@/pages/User/index.tsx"))
const Debris = lazy(()=>import("@/pages/Debris/index.tsx"))
const Nft = lazy(()=>import("@/pages/Nft/index.tsx"))

// 懒加载的模式的组件的写法，外面需要套一层 Loading 的提示加载组件
const withLoadingComponent = (comp:JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)

// 左侧菜单
const routes = [
    {
        "path" : "/",
        "element" : <Navigate to="/index" />,
    },
    {
        "path" : "/",
        "element" : <Home/>,
        "children" : [
            {
                "path" : "/index",
                "element" : withLoadingComponent(<Index/>),
            },
            {
                "path" : "/user",
                "element" : withLoadingComponent(<User/>),
            },
            {
                "path" : "/nft",
                "element" : withLoadingComponent(<Nft/>),
            },
            {
                "path" : "/Debris",
                "element" : withLoadingComponent(<Debris/>),
            },
        ]
    },
    // 登录
    {
        path:"/Login",
        element: <Login />
    },
    // 访问其余路径的时候直接跳到首页
    {
        "path" : "*",
        "element" : <Navigate to="/index" />,
    },
];

export default routes;